import React, { LegacyRef, useMemo, useRef } from 'react'
import { Image, Text, View } from '@tarojs/components'
import i18n from '@I18N'
import Images from '@ASSET/Images'
import DatePicker from '@COMPONENTS/Calendar/DatePicker'
import AtCalendar from '@COMPONENTS/Calendar'
import dayjs from 'dayjs'
import Calendar from '@COMPONENTS/Calendar/types/Calendar'
import LoginVerifyBtn from '@COMPONENTS/Button/LoginVerifyBtn'
import { useSelector } from 'react-redux'
import { GENDER_ENUM } from '@CONSTANTS/common'
import style from './DataCenterHeader.module.scss'

interface Props {
  bucket: string
  onSelectDate: (value: string) => void
  onDayClick: (item: { value: string }) => void
  marks?: Calendar.Mark[]
  maxDate: string
  onMenstruation: (isVisitorLogin?: boolean) => void
  onReport: (isVisitorLogin?: boolean) => void
  showLogin: () => void
  currentDate: Calendar.DateArg
}

const DataCenterHeader: React.FC<Props> = ({
  maxDate,
  bucket,
  onSelectDate,
  onDayClick,
  onMenstruation,
  marks,
  showLogin,
  onReport,
  currentDate
}) => {
  const refAtCalendar = useRef<LegacyRef<AtCalendar> | undefined>(null)
  const painLogPatient = useSelector(state => state.patient.painLogPatient)
  const isVisitor = useSelector(state => state.profile.isVisitor)
  const showBtn = useMemo(() => !isVisitor && painLogPatient?.Gender === GENDER_ENUM[1], [painLogPatient?.Gender, isVisitor])
  const onSelectDateCall = (value: any) => {
    if (dayjs(maxDate).isBefore(value.detail.value, 'days')) return
    // @ts-ignore
    refAtCalendar.current?.handleSelectDate(value)
    onSelectDate?.(value.detail.value)
  }
  const onMonthChange = (value: string) => {
    if (dayjs(maxDate).isBefore(value, 'month')) return
    onSelectDate?.(dayjs(value).format('YYYY-MM'))
  }
  return (
    <View className={style.container}>
      <View className={style.titleContainer}>
        <DatePicker showIcon onSelectDate={onSelectDateCall} value={bucket} maxDate={maxDate} />
        <View className={style.right}>

          {showBtn && (
          <LoginVerifyBtn
            className={style.menstruation}
            onClick={onMenstruation}
            showLogin={showLogin}
            loginSuccess={() => onMenstruation(true)}
          >
            <Image src={Images.dataCenter.icon_menstruation} className={style.menstruationIcon} />
            <Text className={style.menstruationText}>{i18n.dataCenter.menstruation()}</Text>
          </LoginVerifyBtn>
          )}
          <LoginVerifyBtn
            className={style.menstruation}
            onClick={onReport}
            showLogin={showLogin}
            loginSuccess={() => onReport(true)}
          >
            <Image src={Images.dataCenter.icon_report} className={style.menstruationIcon} />
            <Text className={style.menstruationText}>{i18n.dataCenter.report()}</Text>
          </LoginVerifyBtn>
        </View>
      </View>
      <AtCalendar
        hideArrow
        showHeaderLine
        showMark
        currentDate={currentDate}
        maxDate={maxDate}
        marks={marks || []}
        className={style.calendar}
        // @ts-ignore
        ref={refAtCalendar}
        onMonthChange={onMonthChange}
        onDayClick={onDayClick}
      />
    </View>
  )
}

export default DataCenterHeader
